<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>

    <link rel="stylesheet" href="../statics/css/bootstrap.min.css">
    <style>
        .card {
            margin-top: 10rem;
        }

        .form-control {
            width: 25rem;
            margin-left: 2.5px;
        }

        .form-group {
            margin-left: 1rem;
        }

        .btn-primary {
            margin-bottom: 0.5rem;
            margin-left: 5rem;
            width: 6rem;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col align-self-start">

            </div>
            <div class="col align-self-center">
                <div class="alert alert-danger " role="alert" style="text-align: center;" id="msg">
                    <strong>提示:</strong>
                    <font id="msgId">&nbsp;</font>
                </div>

                <div class="card" style="width: 28rem;">

                    <form id="registerForm">
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户名:</label>
                            <input type="text" class="form-control" id="username" name="username"
                                aria-describedby="emailHelp">

                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">密码:</label>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">确认密码:</label>
                            <input type="password" class="form-control" id="repassword" name="repassword">
                        </div>

                        <button type="button" class="btn btn-primary" onclick="jump()">注册</button>
                        <button type="button" class="btn btn-primary" onclick="toLogin()">取消</button>
                    </form>
                </div>
            </div>
            <div class="col align-self-end">
            </div>
        </div>
    </div>


</body>
<script src="../statics/js/query-3.6.0.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<script src="../statics/js/bootstrap.min.js"></script>
<script>
    function toLogin() {
        window.location.href = '/login'
    };

    function jump() {
        //获取表单数据
        let uid = $('#username').val();
        let pwd = $('#password').val();
        let repwd = $('#repassword').val();

        //判断用户名，密码是否为空是否为空，为空则提示，不为空则向服务器提交
        if (uid.length > 0 && pwd.length > 0 && pwd == repwd) {
            axios({
                method:'post',
                url:'/registerDone',
                data:$('registerForm').sequelize(),
            }).then(function (res){

            })
        } else {
            msg_fn('用户名，密码不能为空，并且两次输入的密码应该一致！！！')
        }

        //包装错误提示的自动隐藏，以及动作
        function msg_fn(msg) {
            $('#msgId').text(msg),
                $('.alert').remove('invisible');
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000);

        }
    }
</script>

</html>